<template>
  <div>
    <a-form-model ref="wf_FormEditStep2" :rules="rules" :model="formDefine">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="英文标识">
        {{ formDefine.key_ }}
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="流程名称">
        {{ formDefine.name_ }}
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" required prop="category_" :wrapper-col="wrapperCol" label="分类">
        <a-select
          v-model="formDefine.category_"
          class="widthBox"
          mode="tags"
          placeholder="请选择分类(可手动输入)"
          showSearch
          @change="selectChange"
        >
          <a-select-option v-for="(item, index) in categoryList" :key="item.category_ + index" :value="item.category_">
            {{ item.category_ }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描述">
        <a-textarea
          class="heightBox widthBox"
          v-model="formDefine.description_"
          placeholder="请输入描述"
          :max-length="500"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" required prop="datasource" :wrapper-col="wrapperCol" label="数据源">
        <a-select
          :disabled="disabled"
          v-model="formDefine.datasource"
          class="widthBox"
          placeholder="请选择数据源"
        >
          <a-select-option v-for="item in datasourceList" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-popconfirm
        v-if="disabled"
              ok-text="确定"
              cancel-text="取消"
              @confirm="disabled = false"
            >
            <template slot="title">
          <span>修改数据源后，需要重新编辑界面布局和环节配置！</span>
          <br/>
          <span>确定修改吗？</span>
        </template>
              <a-icon slot="icon" type="question-circle-o" style="color: red" />
              <a style="margin-left:10px;"  v-if="!!formInfo.formid">修改数据源</a>
            </a-popconfirm>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import { queryCategory } from '@/api/workflow/act_dsn_form_define.js'
import { queryha_datasourceList } from '@/api/workflow/ha_datasource.js'
export default {
  props: ['formInfo'],
  data () {
    return {
      formDefine: {
        name_: null, // 流程名称
        key_: undefined, // 流程英文标识
        description_: null, // 描述
        category_: [], // 分类
        datasource: undefined // 数据源
      }, // 页面渲染数据
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      rules: {
        category_: [{ required: true, message: '请选择分类', trigger: 'change' }],
        datasource: [{ required: true, message: '请选择数据源', trigger: 'change' }]
      },
      categoryList: [],
      datasourceList: [],
      disabled: false
    }
  },
  created () {
    if(this.formInfo.formid){
        this.disabled = true
    }
    queryCategory().then(res => {
      if (res.code == 0 && res.data) {
        this.categoryList = res.data
      }
    })
    queryha_datasourceList({ pageSize: 2147483647 }).then(res => {
      //   console.log('queryha_datasourceList', res)
      //   console.log('this.formDefine.datasource', this.formDefine.datasource)
      if (res.code == 0 && res.data && res.data.content) {
        const defaultSource = res.data.content.find(item => item.isdefault == 3200)
        if (!this.formDefine.datasource) {
          this.formDefine.datasource = defaultSource.id
        }
        this.datasourceList = res.data.content
      }
    })
    Object.keys(this.formInfo.step2).forEach(key => {
      this.formDefine[key] = this.formInfo.step2[key]
    })
    // console.log('步骤2数据', this.formDefine)
  },
  methods: {
    validate () {
      let flag = false
      //   console.log('this.$refs.wf_FormEditStep2', this.$refs.wf_FormEditStep2)
      this.$refs.wf_FormEditStep2.validate(valid => {
        if (valid) {
          flag = true
        }
      })
      return flag
    },
    // 下拉分类的值
    selectChange (value) {
      if (value.length > 1) {
        this.formDefine.category_.splice(0, this.formDefine.category_.length - 1)
      }
      //   console.log('下拉', this.formDefine.category_)
    },
    setData () {
      // console.log('步骤2给值', this.formDefine)
      this.$emit('setData', this.formDefine)
    }
  }
}
</script>

<style scoped>
.heightBox {
  height: 200px;
}
.widthBox {
  width: 50%;
}
</style>
